<template>
  <!-- 加载器 -->
  <Loading v-if="isLoading"></Loading>
  <Form
    class="w-1/3 m-auto mt-40 shadow-2xl shadow-red-300 rounded-box"
    v-if="!isLoading"
    :validation-schema="schema"
    @submit="onSubmit"
  >
    <!-- student name -->
    <div class="flex gap-2 my-4 w-3/4 mx-auto pt-4">
      <select class="select w-full" v-model="currentStudent">
        <option disabled selected>Choose Student</option>
        <option
          v-for="(student, index) in studentList"
          :key="index"
          :value="student"
        >
          {{ student.name }}
        </option>
      </select>
    </div>

    <!-- student ID -->
    <label class="input flex gap-2 my-4 w-3/4 mx-auto"
      >Student ID
      <Field
        name="student_id"
        type="text"
        class="input input-primary"
        :value="currentStudent.student_id"
        disabled
      />
    </label>
    <ErrorMessage name="student_id" class="text-red-500 block text-center" />
    <!-- 班级 -->
    <label class="input flex gap-2 my-4 w-3/4 mx-auto"
      >Class
      <Field
        name="class"
        type="text"
        class="input input-neutral"
        :value="`Class ${currentStudent.class} | Grade ${currentStudent.grade}`"
        disabled
      />
    </label>
    <ErrorMessage name="class" class="text-red-500 block text-center" />
    <!-- 分数 -->
    <label class="input flex gap-2 my-4 w-3/4 mx-auto"
      >Score
      <Field
        name="score"
        type="Number"
        class="input input-primary"
        v-model="score"
        min="0"
        max="100"
      />
    </label>
    <ErrorMessage name="score" class="text-red-500 block text-center" />
    <!-- 学科 -->
    <div class="flex gap-2 my-4 w-3/4 mx-auto">
      <select class="select w-full" v-model="subject">
        <option disabled selected>Choose Subject</option>
        <option>Mathematics</option>
        <option>English</option>
        <option>History</option>
        <option>Geography</option>
        <option>Science</option>
        <option>Chemistry</option>
        <option>Physics</option>
        <option>Biology</option>
      </select>
    </div>

    <!-- 学期和年份 -->
    <div class="grid grid-cols-2 gap-2 my-2 w-3/4 mx-auto">
      <select class="select" v-model="semesterYear">
        <option disabled>Choose Year</option>
        <option v-for="year in yearList" :key="year">{{ year }}</option>
      </select>

      <select class="select" v-model="semesterSeason">
        <option disabled>Choose Season</option>
        <option>Spring</option>
        <option>Autumn</option>
      </select>
    </div>
    <!-- 按钮 -->
    <div class="text-center">
      <button class="btn btn-primary my-2">Update Score</button>
    </div>
  </Form>
</template>
<script setup>
import { getUserId } from "@/ultils/tokenHelper";
import { createScore } from "@/services/ApiScore";
import { getStudentList } from "@/services/ApiStudent";
import { ref, onMounted } from "vue";
import { useToast } from "vue-toastification";
import { useRouter } from "vue-router";
import Loading from "@/ui/Loading.vue";

import { Form, Field, ErrorMessage } from "vee-validate";
import * as yup from "yup";

const schema = yup.object({
  score: yup.number().required().max(100).min(0),
});

const router = useRouter();
const toast = useToast();
const isLoading = ref(true);

const name = ref("jackson");

const score = ref(0);
const subject = ref("English");
const semesterYear = ref("2023");
const semesterSeason = ref("Spring");

const currentStudent = ref({
  name: "someone",
  student_id: "1234",
  class: "x",
  grade: "x",
});
const studentList = ref([]);

const yearList = Array.from(
  { length: new Date().getFullYear() - 2020 + 1 },
  (_, index) => index + 2020
);

onMounted(async () => {
  isLoading.value = true;
  const teacherId = getUserId();
  //select student by teacherId
  studentList.value = await getStudentList(teacherId);

  currentStudent.value = studentList.value[0];
  isLoading.value = false;
});

async function onSubmit() {
  toast.info("Score upload in progress");
  const newScore = {
    student_id: currentStudent.value.student_id,
    subject: subject.value,
    score: score.value,
    semester_year: semesterYear.value,
    semester_season: semesterSeason.value,
  };
  const data = await createScore(newScore);
  console.log(data);

  router.push({ name: "score" });
  toast.success("Score upload successfully");
  // console.log(newScore);
}
</script>
